<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>留言板 - 个人空间</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #5B7BDF;
      --primary-light: #E8EBFA;
      --secondary: #FF7D54;
      --success: #4CAF50;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --bg-light: #F2F3F5;
      --bg-white: #FFFFFF;
      --border-light: #E5E6EB;
      --gray-light: #F2F3F5;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      line-height: 1.6;
      font-size: 15px;
      padding-bottom: 80px;
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: var(--primary);
      color: white;
      padding: 0.75rem 1rem;
    }
    
    .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.9);
      padding: 0.5rem 0.75rem;
    }
    
    .navbar-nav .nav-link.active {
      color: white;
      font-weight: 500;
    }
    
    /* 留言板头部 */
    .board-header {
      background-color: var(--bg-white);
      padding: 15px;
      margin-bottom: 15px;
    }
    
    .board-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .board-title i {
      color: var(--primary);
    }
    
    .board-desc {
      font-size: 14px;
      color: var(--text-secondary);
    }
    
    /* 留言输入框 */
    .message-input-container {
      background-color: var(--bg-white);
      padding: 12px 15px;
      margin: 0 15px 15px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .input-group {
      display: flex;
      gap: 10px;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .message-input {
      flex: 1;
      position: relative;
    }
    
    .message-input textarea {
      width: 100%;
      border: 1px solid var(--border-light);
      border-radius: 20px;
      padding: 10px 15px;
      resize: none;
      font-size: 14px;
      height: 42px;
      transition: height 0.3s ease;
    }
    
    .message-input textarea:focus {
      outline: none;
      border-color: var(--primary);
      height: 80px;
    }
    
    .send-btn {
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    /* 留言列表 */
    .messages-list {
      margin: 0 15px;
    }
    
    .message-item {
      background-color: var(--bg-white);
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      position: relative;
    }
    
    .message-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .author-avatar {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .author-info {
      flex: 1;
    }
    
    .author-name {
      font-weight: 500;
      font-size: 15px;
      margin-bottom: 2px;
    }
    
    .message-time {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .message-content {
      font-size: 15px;
      margin-bottom: 10px;
      line-height: 1.6;
    }
    
    .message-actions {
      display: flex;
      gap: 15px;
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }
    
    .action-btn:hover {
      color: var(--primary);
    }
    
    /* 回复区域 */
    .replies-section {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border-light);
    }
    
    .reply-item {
      display: flex;
      gap: 10px;
      margin-bottom: 12px;
    }
    
    .reply-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .reply-content {
      flex: 1;
      background-color: var(--gray-light);
      border-radius: 16px;
      padding: 10px 12px;
    }
    
    .reply-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 5px;
    }
    
    .reply-author {
      font-weight: 500;
      font-size: 13px;
    }
    
    .reply-time {
      font-size: 11px;
      color: var(--text-secondary);
    }
    
    .reply-text {
      font-size: 14px;
      line-height: 1.5;
    }
    
    /* 回复输入框 */
    .reply-input-container {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    
    .reply-input {
      flex: 1;
      position: relative;
    }
    
    .reply-input input {
      width: 100%;
      border: 1px solid var(--border-light);
      border-radius: 20px;
      padding: 8px 15px;
      font-size: 14px;
    }
    
    .reply-input input:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .reply-send {
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 14px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 1000;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 消息提示 */
    .toast {
      position: fixed;
      bottom: 70px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.7);
      color: white;
      padding: 8px 16px;
      border-radius: 4px;
      font-size: 14px;
      z-index: 1001;
      display: none;
    }
    
    .toast.show {
      display: block;
      animation: fadeInOut 2s ease;
    }
    
    @keyframes fadeInOut {
      0% { opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { opacity: 0; }
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-expand">
    <div class="container-fluid">
      <ul class="navbar-nav w-100 justify-content-between">
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="返回">
            <i class="fa fa-arrow-left"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">留言板</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="设置">
            <i class="fa fa-cog"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  
  <!-- 留言板头部 -->
  <div class="board-header">
    <div class="board-title">
      <i class="fa fa-comments"></i> 王宇轩的留言板
    </div>
    <div class="board-desc">这里是访客与王宇轩交流的空间，共有 128 条留言</div>
  </div>
  
  <!-- 留言输入框 -->
  <div class="message-input-container">
    <div class="input-group">
      <img src="https://picsum.photos/200/200?random=99" alt="我的头像" class="user-avatar">
      <div class="message-input">
        <textarea placeholder="写下你的留言..."></textarea>
      </div>
      <button class="send-btn" id="sendMessage">
        <i class="fa fa-paper-plane"></i>
      </button>
    </div>
  </div>
  
  <!-- 留言列表 -->
  <div class="messages-list">
    <!-- 留言1 -->
    <div class="message-item">
      <div class="message-header">
        <img src="https://picsum.photos/200/200?random=10" alt="林晓雯" class="author-avatar">
        <div class="author-info">
          <div class="author-name">林晓雯</div>
          <div class="message-time">今天 09:24</div>
        </div>
      </div>
      <div class="message-content">
        宇轩你好！看了你关于产品设计的最新分享，很有启发。特别是关于用户研究的部分，我最近也在做类似的项目，想请教一下你是如何招募合适的测试用户的？
      </div>
      <div class="message-actions">
        <div class="action-btn reply-btn">
          <i class="fa fa-reply"></i> 回复
        </div>
        <div class="action-btn like-btn">
          <i class="fa fa-heart-o"></i> 点赞 (12)
        </div>
      </div>
      
      <!-- 回复区域 -->
      <div class="replies-section">
        <div class="reply-item">
          <img src="https://picsum.photos/200/200?random=6" alt="王宇轩" class="reply-avatar">
          <div class="reply-content">
            <div class="reply-header">
              <span class="reply-author">王宇轩</span>
              <span class="reply-time">今天 10:15</span>
            </div>
            <div class="reply-text">
              你好晓雯！招募测试用户我通常会结合线上线下，线上通过社群和精准广告，线下会和相关场景的实体店合作。关键是要明确用户画像，确保招募到的用户符合产品目标群体特征。可以具体说说你的项目类型吗？
            </div>
          </div>
        </div>
        
        <div class="reply-item">
          <img src="https://picsum.photos/200/200?random=10" alt="林晓雯" class="reply-avatar">
          <div class="reply-content">
            <div class="reply-header">
              <span class="reply-author">林晓雯</span>
              <span class="reply-time">今天 11:03</span>
            </div>
            <div class="reply-text">
              是一款面向职场女性的健康管理APP，主要聚焦于压力管理和睡眠改善。现在卡在用户招募这块，很难找到精准的目标用户。
            </div>
          </div>
        </div>
        
        <!-- 回复输入框 -->
        <div class="reply-input-container">
          <img src="https://picsum.photos/200/200?random=99" alt="我的头像" class="reply-avatar">
          <div class="reply-input">
            <input type="text" placeholder="回复 @林晓雯 ...">
          </div>
          <button class="reply-send">
            <i class="fa fa-paper-plane"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 留言2 -->
    <div class="message-item">
      <div class="message-header">
        <img src="https://picsum.photos/200/200?random=11" alt="张俊杰" class="author-avatar">
        <div class="author-info">
          <div class="author-name">张俊杰</div>
          <div class="message-time">昨天 16:47</div>
        </div>
      </div>
      <div class="message-content">
        上周参加了你分享的产品沙龙，收获很大！特别是关于敏捷开发和产品迭代的部分，我们团队正在转型敏捷，遇到了不少阻力，想请教一下你们团队是如何平滑过渡的？
      </div>
      <div class="message-actions">
        <div class="action-btn reply-btn">
          <i class="fa fa-reply"></i> 回复
        </div>
        <div class="action-btn like-btn">
          <i class="fa fa-heart"></i> 点赞 (36)
        </div>
      </div>
      
      <!-- 回复区域 -->
      <div class="replies-section">
        <div class="reply-item">
          <img src="https://picsum.photos/200/200?random=6" alt="王宇轩" class="reply-avatar">
          <div class="reply-content">
            <div class="reply-header">
              <span class="reply-author">王宇轩</span>
              <span class="reply-time">昨天 18:21</span>
            </div>
            <div class="reply-text">
              感谢参加！敏捷转型确实需要团队整体的理解和配合。我们当时是从小项目试点开始，先让核心成员参加培训，再逐步推广。关键是管理层要坚定支持，同时要根据团队特点调整敏捷实践，不能生搬硬套。可以先从每日站会和迭代规划开始尝试。
            </div>
          </div>
        </div>
        
        <!-- 回复输入框 -->
        <div class="reply-input-container">
          <img src="https://picsum.photos/200/200?random=99" alt="我的头像" class="reply-avatar">
          <div class="reply-input">
            <input type="text" placeholder="回复 @张俊杰 ...">
          </div>
          <button class="reply-send">
            <i class="fa fa-paper-plane"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 留言3 -->
    <div class="message-item">
      <div class="message-header">
        <img src="https://picsum.photos/200/200?random=13" alt="刘梦琪" class="author-avatar">
        <div class="author-info">
          <div class="author-name">刘梦琪</div>
          <div class="message-time">3天前</div>
        </div>
      </div>
      <div class="message-content">
        喜欢你分享的摄影作品，构图和光影都处理得很专业！想问问你用的是什么相机和镜头？平时怎么练习构图的？
      </div>
      <div class="message-actions">
        <div class="action-btn reply-btn">
          <i class="fa fa-reply"></i> 回复
        </div>
        <div class="action-btn like-btn">
          <i class="fa fa-heart-o"></i> 点赞 (24)
        </div>
      </div>
      
      <!-- 回复输入框 -->
      <div class="reply-input-container">
        <img src="https://picsum.photos/200/200?random=99" alt="我的头像" class="reply-avatar">
        <div class="reply-input">
          <input type="text" placeholder="回复 @刘梦琪 ...">
        </div>
        <button class="reply-send">
          <i class="fa fa-paper-plane"></i>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 消息提示 -->
  <div class="toast" id="toast">操作成功</div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 显示提示消息
    function showToast(message) {
      const toast = document.getElementById('toast');
      toast.textContent = message;
      toast.classList.add('show');
      setTimeout(() => {
        toast.classList.remove('show');
      }, 2000);
    }
    
    // 发送留言
    document.getElementById('sendMessage').addEventListener('click', function() {
      const textarea = document.querySelector('.message-input textarea');
      const message = textarea.value.trim();
      
      if (message) {
        showToast('留言发送成功');
        textarea.value = '';
        textarea.style.height = '42px';
        
        // 实际应用中这里应该将留言发送到服务器
        // 并在留言列表顶部添加新留言
      } else {
        showToast('请输入留言内容');
      }
    });
    
    // 回复按钮点击
    document.querySelectorAll('.reply-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const replyInput = this.closest('.message-item').querySelector('.reply-input input');
        if (replyInput) {
          replyInput.focus();
        }
      });
    });
    
    // 发送回复
    document.querySelectorAll('.reply-send').forEach(btn => {
      btn.addEventListener('click', function() {
        const input = this.closest('.reply-input-container').querySelector('input');
        const reply = input.value.trim();
        
        if (reply) {
          const authorName = input.placeholder.match(/@(\S+)/)[1];
          showToast(`回复 @${authorName} 成功`);
          input.value = '';
          
          // 实际应用中这里应该将回复发送到服务器
          // 并在回复列表添加新回复
        } else {
          showToast('请输入回复内容');
        }
      });
    });
    
    // 点赞功能
    document.querySelectorAll('.like-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        const countEl = this.childNodes[2];
        let count = parseInt(countEl.textContent.trim().match(/\d+/)[0]);
        
        if (icon.classList.contains('fa-heart-o')) {
          icon.classList.remove('fa-heart-o');
          icon.classList.add('fa-heart');
          this.style.color = '#E91E63';
          count += 1;
          showToast('点赞成功');
        } else {
          icon.classList.remove('fa-heart');
          icon.classList.add('fa-heart-o');
          this.style.color = '';
          count -= 1;
          showToast('取消点赞');
        }
        
        countEl.textContent = ` 点赞 (${count})`;
      });
    });
    
    // 回车发送回复
    document.querySelectorAll('.reply-input input').forEach(input => {
      input.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          e.preventDefault();
          this.closest('.reply-input-container').querySelector('.reply-send').click();
        }
      });
    });
    
    // 回车发送留言
    document.querySelector('.message-input textarea').addEventListener('keypress', function(e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        document.getElementById('sendMessage').click();
      }
    });
  </script>
</body>
</html>
